<template>
    <div id="app">
        <!-- <el-button>
            <span class="iconfont icon-search3"></span>
           保存
        </el-button>

        <collapse>
            <template v-slot:title>
                <span>主题一</span>
                <span>主题一</span>
                <span>主题一</span>
            </template>

            
            
            <template v-slot:child>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li>3</li>
                    <li></li>
                    <li></li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </template>
        </collapse>

        <cur-user>
            <template v-slot:default="test">
                {{test.aa.firstName}}
            </template>
        </cur-user>

        <div>
            <span @click="showCom='elNav'">菜单</span>
            <span @click="showCom='product'">商家</span>
            <span @click="showCom='prize'">评价</span>
        </div>
        <button v-on:click="add">Add</button>
        <button v-on:click="remove">Remove</button> -->
        <!-- <transition-group
           name="list"
        >
            <span v-for="item in items" v-bind:key="item" class="list-item">
                {{ item }}
            </span>
            
        </transition-group> -->

        <!-- <transition

        >
            <keep-alive>
                <component :is="showCom"></component>
            </keep-alive>
        </transition> -->
        <!-- 自定义指令：
            全局注册指令

            局部注册指令

            Vue.directive(指令名,{
                bind(){

                }
                inserted:
                update
                componentUpdated
                unbind
            })
         -->
         <input type="text" v-focus>

            <button @click="addFun">+</button>
            <button v-test>去结算</button>
    </div>
</template>

<script>
import elButton from '@/el-button'
import collapse from '@/collapse'
import curUser from '@/cur-user'
import prize from '@/prize'
import elNav from '@/el-nav'
import product from '@/product'
export default {
    components:{
        elButton,
        collapse,
        curUser,
        prize,
        elNav,
        product
    },
    data(){
        return {
            showCom:'elNav',
            items: [1,2,3,4,5,6,7,8,9],
            nextNum:10,
            buyList:[]
        }
    },
    methods: {
        randomIndex: function () {
            return Math.floor(Math.random() * this.items.length)
        },
        add: function () {
            this.items.splice(this.randomIndex(), 0, this.nextNum++)
        },
        remove: function () {
            this.items.splice(this.randomIndex(), 1)
        },
        addFun(){
            this.buyList.push({"title":"标题一"});
            console.log(this.buyList);
        }
    },
    directives:{
        focus:{
            inserted(el){
                el.focus()
            }
        },
        test:{
            update(el,binding,vnode){
                if(vnode.context.buyList.length){
                    el.style.backgroundColor="red";
                }else{
                    el.style.backgroundColor="gray";
                }
            }
        }
    }
}
</script>

<style>
@import './assets/font/iconfont.css';
@import './assets/animate.css';

</style>


